<template>
	<view id="member-level">
		<header-back :headerTitle="$lang('level.title')"></header-back>
		<view class="content-level">
			<view class="header">
				<view class="user-box">
					<image class="user-img" :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().default_headimg" mode="aspectFill"></image>
					<view class="user-name">
						<view class="h2">{{memberInfo.nickname}}</view>
						<view class="h6">{{ $lang('level.currentLevel') }}：{{memberInfo.member_level_name}}</view>
					</view>
				</view>
			</view>
			
			<view class="content">
				<view class="leve-row" v-if="vipObj.level_id">
					<view class="h3">{{vipObj.level_name}}</view>
					<view class="h1">{{vipObj.price}}<text class="h3">USDT</text></view>
				</view>
				<view class="no-leve" v-else></view>
				<view class="row-box">
					<view class="h2">{{ $lang('level.exclusiveRights') }}</view>
					<view class="row-wrap">
						<view class="row-item">
							<image class="row-icon" src="/static/icon/icon_vip_01.png" mode=""></image>
							<view class="row-text">{{ $lang('level.fullRebate') }}</view>
							<view class="row-text">{{ $lang('level.thresholdExemption') }}</view>
						</view>
						<view class="row-item">
							<image class="row-icon" src="/static/icon/icon_vip_02.png" mode=""></image>
							<view class="row-text">{{ $lang('level.advert') }}</view>
							<view class="row-text">{{ $lang('level.memberPrivileges') }}</view>
						</view>
						<view class="row-item">
							<image class="row-icon" src="/static/icon/icon_vip_03.png" mode=""></image>
							<view class="row-text">{{ $lang('level.enjoyTheShop') }}</view>
							<view class="row-text">{{ $lang('level.oneStopGlobalLayout') }}</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="content-footer" v-if="vipObj.level_id">
				<view class="btn " @click="openPopup()">{{ $lang('level.openNow') }}</view>
			</view>
			
			
			<!-- 支付密码 -->
			<uni-popup ref="surePopup" type="center" :maskClick="false">
				<view class="tran-popup">
					<view class="popup-top">
						<view></view>
						<view class="popup-title">{{ $lang('level.paymentPassword') }}</view>
						<view></view>
					</view>
					<view class="popup-row">
						<view class="h6">{{ $lang('level.membershipLevel') }}：</view>
						<view class="h3">{{vipObj.level_name}}</view>
					</view>
					<view class="popup-row">
						<view class="h6">{{ $lang('level.membershipFee') }}：</view>
						<view class="h3">{{vipObj.price}} USDT</view>
					</view>
					<view class="popup-pas">
						<input type="password" v-model="formObj.pay_password"  placeholder-style="color: #BBC0CB;" :placeholder="$lang('level.pleaseEnterPaymentPassword')" />
					</view>
					<view class="popup-footer">
						<view class="btn" @click.stop="closeFn()">{{ $lang('level.return') }}</view>
						<view class="btn btn-act" @click.stop="submitFn()">{{ $lang('level.confirm') }}</view>
					</view>
				</view>
			</uni-popup>
			
			
			
		</view>
		
		
		
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			memberInfo: {},
			vipObj: {},
			formObj: {
				level_id: '',
				pay_password: '',
			},
		};
	},
	async onLoad() {
		await this.getMemberInfo()
	},
	components: {
		uniPopup,
		headerBack
	},
	onShow() {

	},
	methods: {
		// 获取会员等级
		getLevel(){
			this.$api.sendRequest({
				url: '/api/memberlevel/getUpgrateLevel',
				method: 'get',
				success:res=>{
					if(res.code == 0 && res.data){
						this.vipObj = res.data;
						this.formObj.level_id = res.data.level_id;
					}
				}
			})
		},
		openPopup(){
			this.$refs.surePopup.open()
		},
		// 关闭弹窗
		closeFn(){
			this.formObj.pay_password = '';
			this.$refs.surePopup.close()
		},
		// 提交会员
		submitFn(){
			if(!this.formObj.pay_password){
				return this.$util.showToast({title: this.$lang('level.pleaseEnterThePassword')})
			}
			uni.showLoading({
				title: 'Loading...',
				mask: true,
			})
			this.$api.sendRequest({
				url: '/api/memberlevel/upgrateLevel',
				data: this.formObj,
				method: 'post',
				success: res=>{
					uni.hideLoading()	
					if(res.code == 0){
						this.$util.showToast({title: this.$lang('level.successfullyOpened')})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1500)
					}else {
						this.$util.showToast({title: res.message})
					}
				}
			})
		},
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				this.memberInfo = res.data;
				this.getLevel();
			}
		},
	}
};
</script>

<style scoped lang="scss">
	.header {
		width: 100%;
		height: 330rpx;
		background: linear-gradient(135deg, #5E6B7D 0%, #303A48 100%, #303947 100%);
		padding: 38rpx 32rpx;
		box-sizing: border-box;
		.user-box {
			display: flex;
			align-items: center;
			.user-img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				display: block;
			}
			.user-name {
				margin-left: 26rpx;
				.h2 {
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 44rpx;
					margin-bottom: 14rpx;
				}
				.h6 {
					font-size: 26rpx;
					font-weight: 600;
					color: #D1D7DF;
				}
			}
		}
	}
	
	.content {
		width: 100%;
		padding: 0rpx 32rpx;
		box-sizing: border-box;
		position: absolute;
		top: 270rpx;
		left: 0px;
		.leve-row {
			width: 100%;
			height: 272rpx;
			background-image: url(../../static/icon/vip_bozuan_01.png);
			background-repeat:no-repeat center;
			background-size:100% 100%;
			padding: 42rpx 46rpx 0px;
			box-sizing: border-box;
			margin-bottom: 40rpx;
			.h3 {
				font-size: 32rpx;
				font-weight: 600;
				color: #23575E;
				line-height: 44rpx;
				margin-bottom: 24rpx;
			}
			.h1 {
				font-size: 48rpx;
				font-weight: 600;
				color: #23575E;
				line-height: 66rpx;
				.h3 {
					margin-left: 8rpx;
					margin-bottom: 0px;
				}
			}
		}
		.no-leve {
			width: 100%;
			height: 272rpx;
		}
		
		
		.row-box {
			.h2 {
				font-size: 32rpx;
				font-weight: 600;
				color: #282828;
				line-height: 44rpx;
				margin-bottom: 40rpx;
			}
			.row-wrap {
				display: grid;
				grid-template-columns: 1fr 230rpx 1fr;
				grid-column-gap: 42rpx;
				.row-item {
					text-align: center;
					.row-icon {
						width: 92rpx;
						height: 94rpx;
						margin-bottom: 10rpx;
					}
					.row-text {
						font-size: 24rpx;
						font-weight: 500;
						color: #565F6C;
						line-height: 38rpx;
					}
				}
			}
		}
	}
	
	.content-footer {
		width: 100%;
		padding: 0px 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 74rpx;
		left: 0px;
		.btn {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #444F5F;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 32upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
		}
		
		.popup-pas {
			width: 100%;
			height: 100upx;
			// border: 2upx solid #393873;
			background: #F2F3F5;
			padding: 0px 26upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #292929;
			border-radius: 10upx;
			margin-bottom: 40upx;
		}
		
		.popup-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			.h6 {
				font-size: 26rpx;
				font-weight: 600;
				color: #92969E;
			}
			.h3 {
				font-size: 26rpx;
				font-weight: 600;
				color: #282828;
			}
		}
		
		.popup-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn {
				width: 260upx;
				height: 88upx;
				border-radius: 16upx;
				background: #CCD0D8;
				font-size: 34upx;
				color:#fff;
				font-family: Helvetica-Bold, Helvetica;
				font-weight: bold;
				@include flexCenter;
			}
			.btn-act {
				background: #31bb6d;
				color: #fff;
			}
		}
	}
	
	
</style>
